<template>
  <div>
    <el-breadcrumb
      style="
        border-bottom: 1px solid gray;
        padding-bottom: 20px;
        width: 100% import;
      "
      separator-class="el-icon-arrow-right"
    >
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="margin-top: 20px">
      <el-col :span="20">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item style="margin-left: 15px" label="目录名称">
            <el-input v-model="queryNamw.directoryName" size="mini" @input="changeValue" />
          </el-form-item>
          <el-form-item label="状态" style="margin-left: 30px">
            <el-select
              v-model="queryNamw.state"
              size="mini"
              placeholder="请选择"
              @change="changeValue"
            >
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="dirClear">清除</el-button>
            <el-button type="primary" size="mini" @click="dirSou">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-row type="flex" justify="end">
        <el-button
          type="text"
          icon="el-icon-back"
          @click="fn"
        >返回学科</el-button>
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="showDialog=true"
        >新增目录</el-button></el-row>
      <el-col :span="4" />
    </el-row>
    <!-- 总计 -->
    <el-alert :closable="false" :title="`数据一共${total}是条`" type="info" show-icon />
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="subjectName" label="所属学科" />
      <el-table-column prop="directoryName" label="目录名称" />
      <el-table-column prop="username" label="创建者" />
      <el-table-column label="创建日期">
        <template v-slot="{ row }">
          <span>{{ fromDir(row.addDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totals" label="面试数量" />
      <el-table-column label="状态">
        <template v-slot="{ row }">
          <span>{{ row.state === 1 ? "已启用" : "已禁用" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="text" size="medium" @click="btnAdd(row)">
            <span>{{ row.state === 1 ? "禁用" : "启用" }}</span>
          </el-button>
          <el-button
            :disabled="row.state === 1"
            type="text"
            size="medium"
            @click="dirUplodTan(row)"
          >修改</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delDirTan(row)">
            <el-button
              slot="reference"
              :disabled="row.state === 1"
              type="text"
              size="medium"
              style="margin-left: 10px"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <direTan ref="dirAddData" :show-dialog.sync="showDialog" @direDataTan="dirListAdd" />
  </div>
</template>

<script>
import { list as dirListAdd, changeState, remove as dirRemoveAdd } from '@/api/hmmm/directorys.js'
import moment from 'moment'
import direTan from './direTan.vue'
export default {
  components: {
    direTan
  },
  props: {
    pathId: {
      type: String,
      default: null
    },
    pathName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      select: '',
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      queryParamsTwo: {
        subjectID: this.pathId
      },
      queryNamw: {
        directoryName: '',
        state: ''
      },
      showDialog: false,
      total: ''
    }
  },
  created() {
    this.dirListAdd()
  },
  methods: {
    fn() {
      this.$router.push('/subjects/list')
    },
    async dirListAdd() {
      const { data: { items, counts }} = await dirListAdd(this.queryParamsTwo)
      // console.log(items)
      this.tableData = items
      this.total = counts
    },
    // 转换时间
    fromDir() {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    },
    // 清除
    dirClear() {
      this.queryNamw = {
        directoryName: this.queryNamw.directoryName = '',
        state: this.queryNamw.state = ''
      }
      this.changeValue()
    },
    // 搜素
    dirSou() {
      this.queryParamsTwo = {
        subjectID: this.pathId,
        directoryName: this.queryNamw.directoryName,
        state: this.queryNamw.state
      }
      this.dirListAdd()
    },
    // 改变按钮状态
    async btnAdd(row) {
      if (row.state === 1) {
        row.state = 0
        await changeState(row)
        this.$message.success('操作成功')
      } else {
        row.state = 1
        await changeState(row)
        this.$message.success('操作成功')
      }
    },
    // 获取详情数据
    dirUplodTan(row) {
      this.$nextTick(async() => {
        // console.log(row)
        await this.$refs.dirAddData.detailDirTan(row)
        this.showDialog = true
      })
    },
    // 删除
    async delDirTan(row) {
      await dirRemoveAdd(row)
      this.dirListAdd()
    },
    // 值变化清除
    changeValue(val) {
      console.log(val)
      if (!val) {
        this.queryParamsTwo = {
          subjectID: this.pathId,
          directoryName: this.queryNamw.directoryName,
          state: this.queryNamw.state
        }
        this.dirListAdd()
      }
    }
  }
}
</script>

<style>
</style>
